<template>
  <div class="app-container">
    <list-page-container>
      <template slot="query">
        <el-alert
            title="在确认导入数据无误后请点击“确定”按钮进行数据导入"
            type="success"
            :closable="false">
        </el-alert>
      </template>
      <template slot="table">
        <el-table v-if="showTable" height="100%" :data="listData">
          <el-table-column label="保单类型" align="center" prop="orderTypeName"/>
          <el-table-column label="保单号" align="center" prop="bxdhm"/>
          <el-table-column label="投保单号" align="center" prop="tbdh"/>
          <el-table-column label="投保人/被保险人" align="center" prop="tbr"/>
          <el-table-column label="投保面积" align="center" prop="tbmj"/>
          <el-table-column label="户数" align="center" prop="hs"/>
          <el-table-column label="险种代码" align="center" prop="xzdm"/>
          <el-table-column label="险种名称" align="center" prop="xzmc"/>
          <el-table-column label="总保费" align="center" prop="zbf"/>
          <el-table-column label="自交保费" align="center" prop="zjbf"/>
          <el-table-column label="是否验标" align="center" prop="sfyb"/>
          <el-table-column label="备注" align="center" prop="remark"/>
          <el-table-column label="是否允许导入" align="center" prop="orderTypeName">
            <template slot-scope="scope">
              <span class="allow" v-if="scope.row.allowImport">允许导入</span>
              <span class="notAllow" v-if="!scope.row.allowImport">不允许导入</span>
            </template>
          </el-table-column>
          <el-table-column label="导入备注" align="center" prop="importRemark"/>
          <el-table-column label="所属区域" align="center" prop="areaName">
            <template slot-scope="scope">
              <span v-if="isArr(scope.row.areaCode)">
                {{scope.row.areaName}}
              </span>
              <span v-else style="color: red;font-weight: 700">待设置</span>
            </template>
          </el-table-column>
          <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="openSetAreaDialog(scope.row)"
              >设置区域
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template slot="pageDisplay">
        <el-button icon="el-icon-refresh" size="mini" @click="cancel">取消</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="submitPreposition">确认</el-button>
      </template>

    </list-page-container>


    <el-dialog title="导入保单" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="otherData" :rules="rules" label-width="120px">
        <el-form-item label="保单所属年份" prop="orderYear">
          <el-date-picker
              v-model="otherData.orderYear"
              value-format="yyyy"
              type="year"
              placeholder="选择年">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="设置区域" :visible.sync="areaDialogOpen" width="500px" append-to-body>
      <el-form ref="form" :model="currentChit" :rules="chitRules" label-width="120px">
        <el-form-item label="保单所属组织" prop="areaCode">
          <el-cascader
              v-model="currentChit.areaCode"
              :options="areaData"
              :props="{ checkStrictly: true,label:'orgName',value:'orgCode' }"
              clearable></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setChitAreaName">确 定</el-button>
        <el-button @click="cancelAddAreaName">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getImportData, importData,} from "@/api/chit/chitListPage";
import {importDataMixins} from "@/views/chit/importData/importDataMixins";
import {listDept} from "@/api/system/dept";
import {getAreaData} from "@/utils/getAreaData";
import {isArr} from "@/utils/arrayUtil";

export default {
  name: "importListData",
  mixins: [importDataMixins],
  data() {
    return {
      getDataListFun: getImportData,
      importDataFun: importData,
      areaData: [],
      open: false,
      otherData: {
        orderYear: null
      },
      rules: {
        orderYear: [
          {required: true, message: "保单所属年份不能为空", trigger: "blur"}
        ]
      },
      showTable:true,
      baseAreaData: [],
      currentChit: {},
      chitRules: {
        areaCode: [
          {required: true, message: "保单所属组织不能为空", trigger: "blur"}
        ],
      },
      areaDialogOpen: false,
    }
  },
  methods: {
    isArr,
    submitPreposition() {
      if (this.verifyChitData()){
        this.openDialog();
        this.resetOtherFormData()
      }else {
        this.$message.error('存在位置区域的保单');
      }
    },
    verifyChitData(){
      return !this.listData.some(chitItem => !isArr(chitItem.areaCode))
    },
    openSetAreaDialog(chitItem) {
      this.areaDialogOpen = true
      this.currentChit = chitItem
    },
    closeSetAreaDialog(){
      this.areaDialogOpen = false
    },
    cancelAddAreaName(){
      this.currentChit.areaCode = []
      this.currentChit.areaName = ''
      this.closeSetAreaDialog()
    },
    setChitAreaName() {
      this.addAreaNameToTableData()
      this.reloadTable()
      this.closeSetAreaDialog()
    },
    reloadTable(){
      this.showTable = false;
      let owner = this
      setTimeout(()=>{
        owner.showTable = true;
      },10)
    },
    resetOtherFormData() {
      let {listData: importData} = this
      this.otherData = {
        importData,
        areaCode: null,
        orderYear: null
      }
    },
    submitData() {
      let owner = this
      this.$refs["form"].validate(valid => {
        if (valid) {
          let {importDataFun, otherData, currentFileId: fileId} = owner
          let { orderYear, importData} = otherData
          const data = {
            orderYear,
            importData,
            fileId
          }
          owner.startLoading('正在加载....')
          importDataFun(data).then(res => {
            owner.$modal.msgSuccess('导入任务创建成功')
          }).finally(() => {
            owner.endLoading();
            owner.closeDialog()
            owner.cancel()
          })
        }
      })
    },
    openDialog() {
      this.open = true
    },
    closeDialog() {
      this.open = false
    },
    async setTableData() {
      await this.initAreaData()
      this.addAreaNameToTableData()
      this.reloadTable()
    },
    addAreaNameToTableData() {
      let {listData} = this
      let owner = this
      this.listData = listData.map(dataItem => {
        let {areaCode} = dataItem
        dataItem.areaName = owner.getAreaNameByAreaCode(areaCode)
        return dataItem
      })
    },
    getAreaNameByAreaCode(areaCode) {
      let {baseAreaData} = this
      let resultAreaNames = [];
      if (isArr(areaCode)) {
        areaCode.forEach(codeItem => {
          let areaItem = baseAreaData.find(areaDataItem => areaDataItem.orgCode == codeItem)
          resultAreaNames.push(areaItem?.orgName)
        })
      }
      return resultAreaNames.filter(nameItem => nameItem && nameItem !== '').join('/');
    },
    async initAreaData() {
      let owner = this
      return new Promise(async (resolve, reject) => {
        let {threeData, baseData} = await getAreaData();
        owner.areaData = threeData
        owner.baseAreaData = baseData
        resolve({threeData, baseData})
      })
    }
  },
  created() {
  }
}
</script>

<style scoped>

</style>
